<template>
  <div class="previewMedicalRecord">
    <div class="previewMedicalRecordContent">
      <h3>基本信息</h3>
      <div class="previewContent">
        <div class="previewMedicalImg"></div>
        <div class="previewMedicalMsg">
          <ul>
            <li v-for="(item,index) in previewMsg.baseMsg.msg1" :key="index">
              <span class="previewMsgOdd">{{ item.patient }}</span>
              <span class="previewMsgEvent">{{ item.msg }}</span>
            </li>
          </ul>
          <ul>
            <li v-for="(item,index) in previewMsg.baseMsg.msg2" :key="index">
              <span class="previewMsgOdd">{{ item.patient }}</span>
              <span class="previewMsgEvent">{{ item.msg }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="previewMedicalRecordContent">
      <h3>临床信息</h3>
      <div class="previewMsgMain">
        <h4>主诉信息</h4>
        <ul>
          <li>
            <span class="previewMsgOdd">{{ previewMsg.chiefComplaintInformation.patient }}</span>
            <span class="previewMsgEvent">{{ previewMsg.chiefComplaintInformation.msg }}</span>
          </li>
        </ul>
      </div>
      <div class="previewMsgMain">
        <h4>现病史/既往史</h4>
        <ul>
          <li v-for="(item,index) in previewMsg.nowHistory" :key="index">
            <span class="previewMsgOdd">{{ item.patient }}</span>
            <span class="previewMsgEvent">{{ item.msg }}</span>
          </li>
        </ul>
      </div>
      <div class="previewMsgMain">
        <h4>面部检查</h4>
        <ul>
          <li v-for="(item,index) in previewMsg.faceChecked" :key="index">
            <span class="previewMsgOdd">{{ item.patient }}</span>
            <span class="previewMsgEvent">{{ item.msg }}</span>
          </li>
        </ul>
      </div>
      <div class="previewMsgMain">
        <h4>面部检查</h4>
        <ul>
          <li v-for="(item,index) in previewMsg.faceChecked" :key="index">
            <span class="previewMsgOdd">{{ item.patient }}</span>
            <span class="previewMsgEvent">{{ item.msg }}</span>
          </li>
        </ul>
      </div>
      <div class="previewMsgMain">
        <h4>口内软组织及功能检查</h4>
        <ul>
          <li v-for="(item,index) in previewMsg.mouthChecked" :key="index">
            <span class="previewMsgOdd">{{ item.patient }}</span>
            <span class="previewMsgEvent">{{ item.msg }}</span>
          </li>
        </ul>
      </div>
      <div class="previewMsgMain">
        <h4>错颌畸形检查</h4>
        <ul>
          <li v-for="(item,index) in previewMsg.malocclusion" :key="index">
            <span class="previewMsgOdd">{{ item.patient }}</span>
            <span class="previewMsgEvent">{{ item.msg }}</span>
          </li>
        </ul>
      </div>
      <div class="previewMsgMain">
        <h4>特殊检查</h4>
        <ul>
          <li v-for="(item,index) in previewMsg.specialChecked" :key="index">
            <span class="previewMsgOdd">{{ item.patient }}</span>
            <span class="previewMsgEvent">{{ item.msg }}</span>
          </li>
        </ul>
      </div>
      <div class="previewMsgMain">
        <h4>医生诉求及设计思路</h4>
        <ul>
          <li>
            <p>{{ previewMsg.designIdeas }}</p>
          </li>
        </ul>

      </div>
    </div>
    <div class="previewMedicalRecordContent">
      <h3>影像资料</h3>
      <div class="previewMsgMain">
        <h4>面相照</h4>
        <div class="allImg">
          <div>
            <p>正面像</p>
          </div>
          <div>
            <p>正面微笑像</p>
          </div>
          <div>
            <p>右侧45度像</p>
          </div>
          <div>
            <p>右侧90度像</p>
          </div>
        </div>
      </div>
      <div class="previewMsgMain">
        <h4>口内照</h4>
        <div class="allImg">
          <div>
            <p>口内45度右侧像</p>
          </div>
          <div>
            <p>口内正面像</p>
          </div>
          <div>
            <p>口内45度右侧像</p>
          </div>
        </div>
        <div class="allImg">
          <div>
            <p>口内90度像</p>
          </div>
          <div>
            <p>口内正面上颌像</p>
          </div>
          <div>
            <p>口内正面下颌像</p>
          </div>
        </div>
      </div>
      <div class="previewMsgMain">
        <h4>X光照</h4>
        <div class="allImg">
          <div>
            <p>曲面断层片</p>
          </div>
          <div>
            <p>头颅侧位片</p>
          </div>
        </div>
        <h4 class="upLoad">CBCT文件</h4>
        <h4 class="upLoad">已上传</h4>
      </div>

    </div>
    <div class="previewMedicalRecordContent">
      <h3>口扫</h3>
      <div class="previewMsgMain">
        <h4>口扫</h4>
        <div class="allImg">
          <div>
            <p>上颌</p>
          </div>
          <div>
            <p>下颌</p>
          </div>
          <div>
            <p>合成</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PreviewMedicalRecord',
  data() {
    return {
      previewMsg: {
        baseMsg: {
          msg1: [
            { patient: '患者当前诊所', msg: '北京中宜和门诊' },
            { patient: '患者姓名', msg: '请输入患者姓名' },
            { patient: '患者性别', msg: '男' },
            { patient: '出生日期', msg: '请选择出生日期' }
          ],
          msg2: [
            { patient: '患者依从性预测', msg: '良好' },
            { patient: '家长关系', msg: '请选择' },
            { patient: '家长职业', msg: '请输入家长职业' },
            { patient: '家长联系方式', msg: '请输入家长联系方式' },
            { patient: '家长正畸史', msg: '请输入家长正畸史' }
          ]
        },
        chiefComplaintInformation: { patient: '患者主诉', msg: '请输入文字请输入文字请输入文字请输入文字请输入文字请输入文字请输入文字请输入文字请输入文字请输入文字' },
        nowHistory: [
          { patient: '鼻咽部疾病：', msg: '有' },
          { patient: '过敏史：', msg: '有' },
          { patient: '喂养方式：', msg: '母乳' },
          { patient: '不良习惯：', msg: '无，打鼾' },
          { patient: '全身病史：', msg: '有' },
          { patient: '家族遗传史：', msg: '反颌' },
          { patient: '治疗动机：', msg: '父母意愿' },
          { patient: '治疗动机：', msg: '父母意愿' },
          { patient: '不良习惯发现及持续时间：', msg: '不良习惯不良习惯不良习惯不良习惯不良习惯不良习惯' }
        ],
        faceChecked: [
          { patient: '正面观：', msg: '左右基本对称' },
          { patient: '上唇：', msg: '正常' },
          { patient: '唇肌：', msg: '正常' },
          { patient: '下颌骨：', msg: '正常' },
          { patient: '呼吸方式：', msg: '鼻呼吸' },
          { patient: '侧貌：', msg: '直' },
          { patient: '鼻唇沟：', msg: '锐角' },
          { patient: '颏肌：', msg: '正常' },
          { patient: '吞咽方式：', msg: '正常' }
        ],
        mouthChecked: [
          { patient: '开口度', msg: '文字文字文字' },
          { patient: '开口型', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '闭口型', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '舌体大小：', msg: '正常' },
          { patient: '唇系带附着：', msg: '正常' },
          { patient: '扁桃体：', msg: 'Ⅰ' },
          { patient: '关节弹响：', msg: '无' },
          { patient: '颞下颌关节：', msg: '正常' },
          { patient: '颌干扰：', msg: '无' },
          { patient: '舌体位置：', msg: '正常' },
          { patient: '舌系带：', msg: '正常' },
          { patient: '其他', msg: '字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' }
        ],
        malocclusion: [
          { patient: '锁合牙：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '融合牙：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '乳牙缺失：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '扭转牙：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '畸形中央：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '畸形先天恒牙胚缺失中央：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '根尖发育异常牙：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '冠根比≤1的牙：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '咬上颌腭部黏膜：', msg: '是' },
          { patient: '反颌下颌可退至切对切：', msg: '是' },
          { patient: '牙周炎症：', msg: '无' },
          { patient: '上颌牙弓：', msg: '正常' },
          { patient: '下颌牙弓：', msg: '正常' },
          { patient: '磨牙关系左：', msg: 'Ⅰ' },
          { patient: '磨牙关系右：', msg: 'Ⅰ' },
          { patient: '尖牙关系左：', msg: 'Ⅰ' },
          { patient: '尖牙关系左：', msg: 'Ⅰ' },
          { patient: '前牙覆颌：', msg: 'Ⅰ' },
          { patient: '前牙覆该：', msg: 'Ⅰ' },
          { patient: '其他：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' }
        ],
        specialChecked: [
          { patient: 'CBCT线检查日期：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: 'CBCT线检查诊断：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '颞颌关节检查日期：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' },
          { patient: '颞颌关节检查诊断：', msg: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字' }
        ],
        designIdeas: '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字'
      }
    };
  }
};
</script>

<style scoped>
li{
  list-style: none;
  /*height: 38px;*/
  line-height: 38px;
  /*display: flex;*/
  /*align-items: flex-start;*/
}
.previewMedicalRecord *{
  padding: 0;
  margin: 0;
}
.previewMedicalRecord{
  padding-top: 22px;
  padding-bottom: 80px;
}
.previewMedicalRecordContent{
  padding: 20px 30px 40px;
  border-bottom: 1px solid #e6e6e6;
}
.previewContent{
  display: flex;
  padding-left: 34px ;
  height: 232px;
}
.previewMedicalImg{
  width: 120px;
  height: 120px;
  background: #508FCC;
  margin-right: 76px;
}
.previewMedicalImg img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.previewMedicalMsg{
  display: flex;
}
.previewMedicalMsg ul:first-of-type{
  margin-right: 40px;
}
.previewMsgOdd{
  display: inline-block;
  width: 184px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 38px;
  vertical-align: top;
  /*height: 38px;*/
}
.previewMsgEvent{
  display: inline-block;
  width: 374px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 38px;
  vertical-align: top;
  /*height: 38px;*/
}
.previewContent .previewMsgEvent{
  display: inline-block;
  width: 184px;
  /*height: 38px;*/
}
h3{
  margin-bottom: 20px!important;
}
h4{
  font-size: 16px;
  font-weight: 400;
  padding-top: 20px;
  color: #666666;
}
.previewMsgMain{
  padding: 20px 0px;
}
.previewMsgMain ul{
  margin-top: 10px;
  width: 800px;
  border-top: 1px #E6E6E6 solid;
  margin-bottom: 20px;
}
.previewMsgMain p{
  width: 558px;
}
.allImg{
  display: flex;
  margin-top: 20px;
}
.allImg>div{
  width: 264px;
  height: 180px;
  border-radius: 20px;
  background: #508FCC;
  margin-right: 31px;
  display: flex;
  align-items: flex-end;
}
.allImg>div p{
  width: 301px;
  height: 45px;
  background: linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  border-radius: 0px 0px 20px 20px;
  padding:19px 0 7px 20px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
}
.upLoad{
  margin-top: 40px;
}
</style>
